<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索项目</title>
</head>
<style>
    .content{
         position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)

    }
    input{
        width: 300px;
        height: 50px;
    }
    .show{
        width: 300px;
        height: 200px;
        border: 10px solid black;
        display: none;
    }



</style>
<body>
    
    <div class="content">
        <div>
        <input type="text" id="fdsa" placeholder="请输入你要查询的课程">
        <input type="submit" id="sub">
         </div>
    <div class="show" id="show"></div>
    </div>




        <script>
            let arr = ['fdsa','fdsag','nkjljkn','uqipewrpqo','ijquo[puafsadpi','465','789987456','23154697465'];

            let inputt = document.getElementById('fdsa');
            let showw = document.getElementById('show');
            inputt.onkeyup = function(){
                showw.style.display = 'block';
                let str ='';
                arr.forEach((item) => {
                    let res = item.indexOf(inputt.value);
                    if(res != -1){
                        str += `<p>`+item+ `</p>`;
                
                    }
                  
                })
                if(!str || !inputt.value){
                    showw.innerHTML= `<p>暂无结果</p>`
                }else{
                    showw.innerHTML =str;
                }
                 

            }
            inputt.onblur = function(){
                showw.style.display = 'none';
                inputt.value = '';
            }

        </script>
    
</body>
</html>